## Домашнее задание к занятию #8

#### Тестирование Cypress

- Разверните и настройте Cypress на проекте. (2 балла)
  Соберите конфиги на проекте.
  Запустите тестовые кейсы от Cypress или самописные.
  **DONE** 

- Напишите следующие тест-кейсы и успешно их выполните: (2 балла)
  Авторизация или регистрация с валидацией (как на уроке: проверить на правильность ввода в поля).
  После авторизации сделать логаут.
  После снова авторизоваться и создать пост (вместо создания поста добавил в избранное).
  Найти пост на странице (найти продукт в избранном).
  Поставить лайк этому посту (добавить отзыв продукту).
  Проверить наличие лайка (проверил наличия отзыва).
  **DONE** 

- Напишите следующий тест-кейс и успешно выполните его: (2 балла)
  Зайти на форму авторизации.
  Прописать кейсы авторизации: негативный (с ошибками), позитивный (с правильными данными).
  После авторизации проверить правильность нахождения пользователя на главной странице.
  Сделать логаут.
  **DONE** 

- Напишите следующий тест-кейс и успешно выполните его: (2 балла)
  Зайти на форму авторизации.
  Авторизоваться.
  Перейти на страницу постов или продуктов.
  Поставить лайк третьему и шестому посту или продукту.
  Проверить наличие лайков.
  Снять лайки.
  Проверить снятие лайков.
  **DONE** 

- Напишите следующий тест-кейс и успешно выполните его: (2 балла)
  Зайти на форму авторизации.
  Авторизоваться.
  Поставить лайк третьему и шестому посту или продукту.
  Перейти на страницу постов или продуктов.
  Проверить наличие лайков.
  Снять лайки.
  Проверить снятие лайков.
  **DONE** 

- Напишите следующий тест-кейс и успешно выполните его: (2 балла)
  Зайти на форму авторизации.
  Авторизоваться.
  Перейти на страницу создания постов или продуктов.
  Создать товар или пост.
  Проверить создание товара или поста.
  Удалить товар или пост.
  Проверить удаление товара или поста.
  **DONE** 

## Домашнее задание к занятию #7

#### Тестирование Jest

- Подключите библиотеку React-Testing-Library в проект. (3 балла)
  **DONE** 

- Протестируйте компонент Header на правильность отображения всех элементов. (2 балла)
  **ALMOST DONE** 

- Протестируйте компонент Footer на правильность отображения всех элементов. (2 балла)
  **NOT DONE** 

- Протестируйте компонент создания поста или продукта, применяя тестирование событий (onClick, onChange, onInput. FireEvent, userEvent). (4 балла)
  **NOT DONE** 

- Протестируйте компонент создания или удаления отзывов, применяя тестирование событий (onClick, onChange, onInput. FireEvent, userEvent). (4 балла)
  **NOT DONE** 

- Используйте снапшоты для каждого теста. (3 балла)
  **NOT DONE** 

- Протестируйте работу роутера, применив интеграционное тестирование. (6 баллов)
  **NOT DONE** 

## Домашнее задание к занятию #6

#### Сделайте корзину в интернет-магазине

- Страницу корзины. (2 балла)
  **DONE**

- Слайс корзины, логику добавления и удаления товаров в ней. (2 балла)
  **DONE**

- Отображение количества товаров в корзине, в хедере, в «пузырьке». (2 балла)
  **DONE**

- Возможность добавления в корзину товаров со страницы каталога. (2 балла)
  **DONE**

- Возможность добавления в корзину товара со страницы каталога больше одной штуки (кнопка «В корзину» меняется на счетчик добавляемого товара). (2 балла)
  **DONE**

- Возможность добавления в корзину со страницы товара по макету. (2 балла)
  **DONE**

## Домашнее задание к занятию #5

#### debounce, Intersection Observer

- Реализуйте поиск товаров (5 баллов)
  Поиск должен отражаться в query-параметрах url. Здесь вам поможет хук useSearchParams.
  Реализуйте возможность доставать первоначальное состояние поиска из query-параметров. Чтобы можно было делиться ссылкой, в которой зашита поисковая фраза. Здесь вам поможет хук useSearchParams.
  Поиск должен быть оптимизирован через debounce или throttle. Выбирайте то, что вам больше нравится.
  **DONE**

- Реализуйте бесконечную подгрузку товаров (7 баллов)
  В реализации используйте браузерное API Intersection Observer.
  Корректно настройте endpoint в RTK Query. В реализации вам помогут материалы к занятию.
  **DONE**

## Домашнее задание к занятию #4

#### react-hook-form, RTK Query, HOCs

- Реализуйте страницу регистрации нового пользователя: (3 балла)
  Форма должна быть создана с использованием библиотеки react-hook-form и содержать следующие поля:
  email — валидный email адрес
  group — id вашей группы (строка) в формате: ra-<номер*вашего*потока>. Например, для 147 потока название будет: ra-147
  password — пароль от 6 до 24 символов
  Для валидации используйте библиотеку yup.
  Для отправки запросов необходимо создать мутацию через RTK Query.
  Во время выполнения запроса кнопка регистрации должна быть в состоянии disabled.
  После регистрации пользователя необходимо совершить автоматический редирект пользователя на страницу авторизации.
  **DONE**

- Реализуйте страницу авторизации пользователя: (3 балла)
  Форма должна быть реализована с использованием библиотеки react-hook-form и содержать следующие поля:
  email — валидный email адрес
  password — пароль от 6 до 24 символов
  Для валидации используйте yup.
  Для отправки запросов необходимо создать мутацию через RTK Query.
  Во время выполнения запроса кнопка регистрации должна быть в состоянии disabled.
  После регистрации пользователя необходимо совершить автоматический редирект пользователя на страницу с товарами.
  Под формой входа не забудьте добавить ссылку на страницу регистрации.
  **DONE**

- Реализуйте выход из системы (3 балла)
  Для этого достаточно удалить Access Token.
  **DONE**

- Реализуйте страницу с отображением списка товаров (3 балла)
  Страница должна быть недоступна для неавторизованных пользователей. Сделайте защиту через HOC.
  HOC должен быть универсальным, то есть его можно использовать для защиты любых страниц.
  HOC должен уметь переадресовывать неавторизованного пользователя на страницу входа. После успешной авторизации ваше приложение должно автоматически возвращать пользователя на страницу, которую он хотел посетить первоначально.
  Для отображения данных используйте запрос RTK Query.
  Не забывайте уведомлять пользователя о процессе загрузки данных с помощью лоудера. Желательно написать HOC, который возьмёт на себя обязанности по отображению лодера и ошибок. HOC должен быть универсальным.
  **DONE**

## Домашнее задание к занятию #3

#### redux, redux-toolkit

- Создайте срез пользователя и два асинхронных экшена на получение и изменение данных пользователя. (3 балла)
  Не забудьте типизировать хуки useDispatch и useSelector.
  Также необходима типизация хука createAsyncThunk, точнее типизация передаваемых аргументов.
  Используйте срез везде, где нужен пользователь для рендера компонентов.
  **DONE**

- Реализуйте срез товаров. Создайте асинхронные экшены: получение товаров, удаление товара, установка или удаление
  лайка, поиск товара. (3 балла)
  **DONE**

- Реализуйте срез детальной карточки товара. Создайте асинхронные экшены: получение данных карточки, создание отзыва.
  (3 балла)
  **DONE**

- Избавьтесь от контекста и получайте данные для компонентов из централизованного хранилища. (3 балла)
  **DONE**

## Домашнее задание к занятию #2

#### Роутинг, работа с контекстом

- Реализуйте переход в детальную карточку товара и обратно посредством библиотеки React Router v6 (2 балла)
  Оберните часть компонента Card в компонент Link. Используя динамический роутинг при нажатии на карточку отрендерите компонент детальной карточки, при переходе передавайте объект state с текущим location. На странице детальной карточки разместите кнопку назад, нажатие на которую перенаправляет пользователя на предыдущую страницу (если есть state в объекте location) или по умолчанию перенаправляет на список всех карточек.
  **DONE**

- Реализуйте компонент 404 ошибки и роутинг на него. (2 балла)
  Используйте path \* для обработки несуществующих роутов.
  **DONE**

- Реализуйте страницу профиля и роутинг на неё (2 балла)
  Ссылку на страницу профиля разместите в шапке согласно дизайну.
  **DONE**

- Реализуйте страницу избранных товаров и роутинг на неё. (2 балла)
  Ссылку на страницу избранных товаров разместите в шапке, согласно дизайну.
  **DONE**

- Подключение контекста пользователя и списка товаров. (4 балла)
  Контекст пользователя необходимо использовать в списке товаров, карточке товара, на странице профиля и на странице избранных товаров. От id пользователя зависит отображение лайка на карточке товара.
  Контекст определяется на верхнем уровне компонентов и через компонент Provider пробрасывается дочерним компонентам.
  **DONE**

Дополнительное задание (необязательное)

- Сделайте роутинг с использованием функции createBrowserRouter (3 балла)
  **DONE**

## Домашнее задание к занятию #1

#### Декомпозиция проекта, работа с хуками useState, useEffect

- Создать репозиторий и добавить в Collaborators проверяющего. Развернуть сборку, запустить линтинг и
  проверить работу pre-commit хуков (1 балл)
  **DONE**
- Декомпозировать на компоненты страницу каталога, реализовать (3 балла)
  Header — шапка сайта. +
  Footer — подвал сайта. +
  Card — анонс карточки товара. +
  CardList — список карточек. +
  Logo — логотип. +
  Sort — компонент сортировки. +
  Search — компонент поиска, можно отдельно выделить компонент инпута и кнопки. +
  Spinner/Skeleton — компонент ожидания загрузки или скелетон анонса карточки товара. +
  **DONE**
- Рендеринг товаров из массива (4 балла)
  **DONE**
- Фильтрация товаров при вводе в поисковую строку (4 балла)
  **DONE**
- Реализуйте пагинацию товаров (3 балла)
  **DONE**
